<template>
  <div class='container' >
    <el-dialog title="预览文章"
     :visible='showDialog'
     @close='closeSelectedTag'
    @open='openPreview'
    width='50%'
     >
        <h2>{{detailList.title}}</h2>
        <span>{{loadTime(detailList.createTime)}}</span>
        <span>超级管理员</span>
        <span class="el-icon-view"></span>
        <span>{{detailList.visits}}</span>
        <div class="card">
          <el-divider></el-divider>
         <span v-html="detailList.articleBody"></span>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles.js'
import { parseTime } from '@/utils/index.js'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    curentId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      detailList: []// 接收后台返回的数据

    }
  },

  methods: {
    loadTime (t) { // 时间转换
      return parseTime(t)
    },
    async  openPreview () {
      // console.log(this.curentId)
      const res = await detail({ id: this.curentId })
      // console.log(res)
      this.detailList = res.data
      // console.log(this.detailList)
    },
    closeSelectedTag () { // 关闭预览弹窗
      this.$emit('closeSelectedTag')
    }
  }

}
</script>

<style scoped >
span {
   margin-right: 15px;
 }
 .card {
   background-color: #f5f5f5;
 }
</style>
